// SlotDemo.jsx

import { useState } from "react"

const SlotDemo = (props) => {
  const [title, setTitle] = useState('')
  const [msg, setMsg] = useState('')

  console.log(props);
  return (
    <>
      <h1>Props 当插槽使用</h1>
      <hr />
      <div style={{ textAlign: 'center' }}>
        {props.children}
      </div>
      <div>
        <div style={{ width: '20%', float: "left", height: '200px', 'backgroundColor': 'blue' }}>
          {props.left}
        </div>
        <div style={{ width: '80%', float: "left", height: '200px', 'backgroundColor': 'red' }}>
          {props.right}
        </div>
        <div>
          <h3>props's count: {props.count}</h3>
          <button onClick={() => {
            props.currentEditEvent(1000)
          }}>修改父组件count</button>
        </div>
      </div>
    </>
  )
}

export default SlotDemo